<template>  
  <div class="home">  
    <h2>热门商品</h2>  
    <div class="item-list">  
      <div class="item" v-for="item in items" :key="item.id" @click="goToDetails(item.id)">  
        <h2>{{ item.title }}</h2> 
        <img :src="item.image" alt="商品图片"> 
        <p>{{ item.description }}</p>  
        <p>价格: ¥{{ item.price }}</p>  
      </div>  
    </div>  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'Home',  
  data() {  
    return {  
      items: [  
        { id: 1, title: '二手手机', description: '9成新，无损坏', price: 4500,image:'https://www.helloimg.com/i/2024/10/24/671a3d5c91b75.jpg' },  
        { id: 2, title: '二手笔记本', description: '8成新，电池续航好', price: 8000 },  
        { id: 3, title: '二手相机', description: '几乎全新，带原装包装', price: 5000 },  
      ],  
    };  
  },  
  methods: {  
    goToDetails(itemId) {  
      this.$router.push({ name: 'Details', params: { id: itemId } });  
    },  
  },  
};  
</script>  
  
<style scoped>  
.home {  
  /* text-align: center;   */
  padding: 20px;  
}  
  
.item-list {  
  display: flex;  
  flex-wrap: wrap;  
  justify-content: center;  
}  
  
.item {  
  border: 1px solid #ccc;  
  padding: 20px;  
  margin: 10px;  
  width: 200px;  
  text-align: left;  
}  
</style>